<template>
  <a-layout-content class="container mx-auto py-8">
    <!-- 功能引导区 -->
    <section class="hero-section text-center mb-16">
      <a-typography-title :level="2" class="!mb-6">
        连接全球开发者，探索无限可能
      </a-typography-title>
      <a-input-search
          placeholder="搜索API（如：支付、地图、AI）"
          enter-button="立即搜索"
          size="large"
          class="max-w-2xl mx-auto"
          @search="onSearch"
          style="max-width: 75vh"
      />

      <!-- 数据看板 -->
      <div class="stats-container">
        <a-statistic
            v-for="(stat, index) in stats"
            :key="index"
            :title="stat.title"
            :value="stat.value"
            :value-style="{ color: '#1677ff' }"

        />
      </div>
    </section>

    <!-- API分类展示 -->
    <section class="api-showcase">
          <a-row :gutter="[24, 24]" class="mt-6">
            <a-col
                v-for="api in apis"
                :key="api.id"
                :xs="24" :sm="18" :lg="12" :xl="6"
            >
              <api-card :data="api" />
            </a-col>
          </a-row>
    </section>
  </a-layout-content>
</template>

<script setup>
import { ref } from 'vue';
import ApiCard from '../components/ApiCard.vue';

const stats = ref([
  { title: '开放API总数', value: 2568 },
  { title: '日均调用量', value: '1.2亿' },
  { title: '合作伙伴', value: 89 },
  { title: '开发者社区', value: '10万+' }
]);

const apis = ref([
  {
    id: 1001,
    name: '智能图像识别API',
    category: '人工智能',
    categoryColor: 'purple',
    description: '提供高精度图像分析能力，支持物体检测、场景识别、人脸分析等功能',
    rating: 4.7,
    usageCount: 12456,
    cover: 'https://dummyimage.com/200x150/4A90E2/fff&text=AI+API',
    provider: '深度科技',
    updateTime: '2025-03-25'
  },
  {
    id: 1002,
    name: '全球支付网关API',
    category: '支付',
    categoryColor: 'green',
    description: '支持多币种结算的全球化支付解决方案，覆盖Visa/Mastercard等主流卡种',
    rating: 4.9,
    usageCount: 89234,
    cover: 'https://dummyimage.com/200x150/34D399/fff&text=Payment',
    provider: '金融互联',
    updateTime: '2025-03-27'
  },
  {
    id: 1003,
    name: '智能图像识别API',
    category: '人工智能',
    categoryColor: 'purple',
    description: '提供高精度图像分析能力，支持物体检测、场景识别、人脸分析等功能',
    rating: 4.7,
    usageCount: 12456,
    cover: 'https://dummyimage.com/200x150/4A90E2/fff&text=AI+API',
    provider: '深度科技',
    updateTime: '2025-03-25'
  },
  {
    id: 1004,
    name: '全球支付网关API',
    category: '支付',
    categoryColor: 'green',
    description: '支持多币种结算的全球化支付解决方案，覆盖Visa/Mastercard等主流卡种',
    rating: 4.9,
    usageCount: 89234,
    cover: 'https://dummyimage.com/200x150/34D399/fff&text=Payment',
    provider: '金融互联',
    updateTime: '2025-03-27'
  },
  {
    id: 1005,
    name: '智能图像识别API',
    category: '人工智能',
    categoryColor: 'purple',
    description: '提供高精度图像分析能力，支持物体检测、场景识别、人脸分析等功能',
    rating: 4.7,
    usageCount: 12456,
    cover: 'https://dummyimage.com/200x150/4A90E2/fff&text=AI+API',
    provider: '深度科技',
    updateTime: '2025-03-25'
  },
  {
    id: 1006,
    name: '全球支付网关API',
    category: '支付',
    categoryColor: 'green',
    description: '支持多币种结算的全球化支付解决方案，覆盖Visa/Mastercard等主流卡种',
    rating: 4.9,
    usageCount: 89234,
    cover: 'https://dummyimage.com/200x150/34D399/fff&text=Payment',
    provider: '金融互联',
    updateTime: '2025-03-27'
  },
  {
    id: 1007,
    name: '全球支付网关API',
    category: '支付',
    categoryColor: 'green',
    description: '支持多币种结算的全球化支付解决方案，覆盖Visa/Mastercard等主流卡种',
    rating: 4.9,
    usageCount: 89234,
    cover: 'https://dummyimage.com/200x150/34D399/fff&text=Payment',
    provider: '金融互联',
    updateTime: '2025-03-27'
  },
  {
    id: 1008,
    name: '全球支付网关API',
    category: '支付',
    categoryColor: 'green',
    description: '支持多币种结算的全球化支付解决方案，覆盖Visa/Mastercard等主流卡种',
    rating: 4.9,
    usageCount: 89234,
    cover: 'https://dummyimage.com/200x150/34D399/fff&text=Payment',
    provider: '金融互联',
    updateTime: '2025-03-27'
  },
]); // API数据
</script>

<style scoped>

.api-showcase {
  padding-inline: 50px;
}

.stats-container {
  padding: 40px;
  justify-content: center;
  display: flex;
  gap: 24px; /* 控制间距 */
}

</style>